<template>
  <mxp-popup
    ref="popupRef"
    model="bottom"
    :showToolbar="Boolean(options.title)"
    :toolbarOptions="{ title: String(options.title || ''), showConfirm: false, showCancel: false }"
    :borderRadius="options.borderRadius"
    :background="options.background"
    :safeAreaInsetTop="options.safeAreaInsetTop"
    :maskClose="options.maskClose"
    @hide="onPopupHide"
  >
    <view
      v-for="(item, index) in list"
      :key="index"
      class="item"
      :class="list.length - 1 > index ? 'border' : ''"
      hoverClass="hover"
      :hoverStartTime="0"
      :hoverStayTime="0"
      :style="[{ minHeight: '60px' }, item.itemStyle || {}, { borderColor: options.borderColor }]"
      @click.stop.prevent="onItemClick(index)"
    >
      <view v-if="item.icon || item.loading" class="icon-view" :style="item.iconViewStyle || {}">
        <mxp-icon v-if="item.loading" name="jiazai" :spin="true" :color="item.loadingIconColor || '#333333'" :size="item.iconSize || '20px'"></mxp-icon>
        <mxp-icon-image v-else-if="item.icon" :icon="item.icon"></mxp-icon-image>
      </view>
      <view class="content-view" :style="item.contentViewStyle || {}">
        <text v-if="item.label" class="label" :style="item.labelStyle || {}">{{ item.label }}</text>
        <text v-if="item.description" key="text-2" class="description" :style="item.descriptionStyle || {}">
          {{ item.description }}
        </text>
      </view>
    </view>
    <view v-if="options.cancelText || options.cancelText === 0" style="width: 100%; height: 10px; background-color: #eeeeee"></view>
    <view
      v-if="options.cancelText || options.cancelText === 0"
      key="view-2"
      class="cancel-view"
      hoverClass="hover"
      :hoverStartTime="0"
      :hoverStayTime="0"
      @click="hide('cancel-button')"
    >
      <text class="cancel" :style="options.cancelStyle || {}">取消</text>
    </view>
  </mxp-popup>
</template>

<script lang="ts" setup>
  import MxpPopup from '../mxp-popup/mxp-popup.vue';
  import MxpIcon from '../mxp-icon/mxp-icon.vue';
  import MxpIconImage from '../mxp-icon-image/mxp-icon-image.vue';
  import { type CSSProperties, ref } from 'vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';

  export type $Props = {
    /** 设置标题 */
    title?: number | string; // eslint-disable-line vue/no-unused-properties
    /** 选项上方的描述信息 */
    description?: number | string; // eslint-disable-line vue/no-unused-properties
    /** 取消按钮的文字，不为空时显示按钮 */
    cancelText?: number | string; // eslint-disable-line vue/no-unused-properties
    /** 取消文字样式 */
    cancelStyle?: CSSProperties; // eslint-disable-line vue/no-unused-properties,vue/require-default-prop
    /** 背景 */
    background?: $AllColorStr; // eslint-disable-line vue/no-unused-properties
    /** 圆角 可以是 Boolean 或者具体的圆角值如：10px */
    borderRadius?: $SizeUnitStr | boolean; // eslint-disable-line vue/no-unused-properties
    /** border 颜色 */
    borderColor?: $AllColorStr; // eslint-disable-line vue/no-unused-properties
    /** 是否开启底部安全区适配 */
    safeAreaInsetBottom?: boolean; // eslint-disable-line vue/no-unused-properties
    /** 是否可以点击遮罩关闭 */
    maskClose?: boolean; // eslint-disable-line vue/no-unused-properties
    /** 点击列表的某一项是否自动关闭 */
    itemClose?: boolean; // eslint-disable-line vue/no-unused-properties
    /** zIndex层级默认为 100 */
    zIndex?: number; // eslint-disable-line vue/no-unused-properties
    /** 是否留出顶部安全区(状态栏高度) */
    safeAreaInsetTop?: boolean; // eslint-disable-line vue/no-unused-properties
  };

  export type $ListItem = {
    /** 是否禁用 */
    disabled?: boolean;
    /** loading是否加载中 */
    loading?: boolean;
    /** 加载图标颜色 */
    loadingIconColor?: $AllColorStr;
    /** 图标路径 */
    icon?: string;
    /** 图标大小 */
    iconSize?: $SizeUnitStr;
    /** 标题 */
    label?: number | string;
    /** 描述文本 */
    description?: number | string;
    /** 图标容器的 样式 （装加载图标和自定义图标的容器样式） */
    iconViewStyle?: CSSProperties;
    /** 内容容器的样式 （装标题和描述文本的容器样式）  */
    contentViewStyle?: CSSProperties;
    /** 标题 的样式 */
    labelStyle?: CSSProperties;
    /** 描述文本 的样式  */
    descriptionStyle?: CSSProperties;
    /** 整个item 的样式 */
    itemStyle?: CSSProperties;
  };
  export type $Options = $Props & {
    /** 打开的回调函数 */
    show?: () => void;
    /** 关闭的回调函数 */
    hide?: (type: 'cancel-button' | 'mask' | 'rest' | 'select') => void;
    /** 选中的回调函数 */
    select?: (index: number, item: $ListItem) => void;
  };
  defineOptions({
    name: 'mxp-action-sheet',
  });

  const props = withDefaults(defineProps<$Props>(), {
    borderRadius: true,
    background: '#ffffff',
    borderColor: '#d6d7d9',
    title: '',
    description: '',
    cancelText: '取消',
    safeAreaInsetBottom: true,
    maskClose: true,
    itemClose: true,
    zIndex: 99,
    safeAreaInsetTop: true,
  });
  const emits = defineEmits<{
    (e: 'show'): void;
    (e: 'hide', type: 'cancel-button' | 'confirm' | 'mask' | 'rest' | 'select'): void;
    (e: 'select', index: number, item: $ListItem): void;
  }>();

  const options = ref<$Options>({});

  /** popup */
  const popupRef = ref<InstanceType<typeof MxpPopup> | null>(null);

  const list = ref<$ListItem[]>([]);

  /** popup 关闭 */
  function onPopupHide(type: 'button' | 'confirm' | 'mask' | 'rest') {
    if (type === 'mask') {
      emits('hide', 'mask');
      typeof options.value.hide === 'function' && options.value.hide('mask');
    }
  }
  /**
   * 关闭
   */
  function onItemClick(index: number) {
    emits('select', index, list.value[index]!);
    typeof options.value.select === 'function' && options.value.select(index, list.value[index]!);
    options.value.itemClose && hide('select');
  }

  /**
   * 显示
   */
  function show(_list: $ListItem[] = [], op: $Options = {}) {
    options.value = { ...JSON.parse(JSON.stringify(props)), ...op };
    list.value = _list;
    popupRef.value?.show();
    emits('show');
    typeof options.value.show === 'function' && options.value.show();
  }
  /**
   * 关闭
   */
  function hide(type: 'cancel-button' | 'mask' | 'rest' | 'select' = 'rest') {
    popupRef.value?.hide();
    emits('hide', type);
    typeof options.value.hide === 'function' && options.value.hide(type);
  }

  defineExpose({
    /** 显示弹出框 */
    show,

    /** 关闭弹出框 */
    hide,
  });
</script>

<style lang="scss" scoped>
  .item {
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 15px;
    overflow: hidden;
    border-bottom-width: 0;

    .icon-view {
      margin-right: 10px;
    }

    &.border {
      border-bottom-style: solid;
      border-bottom-width: 1px;
    }

    .content-view {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;

      .label {
        font-size: 18px;
        color: #333333;
      }

      .description {
        font-size: 14px;
        color: #666666;
      }
    }
  }

  .cancel-view {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    height: 60px;

    .cancel {
      font-size: 18px;
      color: #ff0000;
    }
  }

  .hover {
    opacity: 0.7;
  }
</style>
